<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      :title="
        isAssociation
          ? t('routes.demo.documentManager.associatedObject')
          : t('routes.demo.documentManager.reverseAssociatedObject')
      "
      @register="register"
      @ok="handleSubmit"
      @cancel="handleCancel"
      :destroyOnClose="true"
      :minHeight="450"
      :width="1200"
    >
      <Row :gutter="24">
        <Col :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
          <div style="overflow-y: scroll; overflow-x: hidden; height: 400px">
            <Tree :tree-data="dataSource" v-model:expandedKeys="expandedKeys" @select="selectDir" />
          </div>
        </Col>
        <Col
          :xs="1"
          :sm="1"
          :md="1"
          :lg="1"
          :xl="1"
          style="display: flex; justify-content: center"
        />
        <Col :xs="24" :sm="24" :md="24" :lg="19" :xl="19">
          <BasicTable @register="registerTable">
            <!-- 创建时间 -->
            <template #creattime="{ text: creattime }">
              <span>
                {{ proxy.$filters.filterTime(creattime) }}
              </span>
            </template>
            <!-- 创建时间 -->
            <template #state="{ text: state }">
              <span>
                {{ proxy.$filters.filterDocumentStatus(state) }}
              </span>
            </template>
            <!-- 是否为关联文件 -->
            <template #isshortcut="{ text: isshortcut }">
              <span>
                {{ proxy.$filters.filterIsRelated(isshortcut) }}
              </span>
            </template>
          </BasicTable>
        </Col>
      </Row>
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
  /**
   * 模块名:图文档关联，反向关联公共弹窗组件
   * 代码描述: 弹窗共分为左右2模块，左侧为目录，右侧为点击目录显示列表，列表首列为单选框，选中后点击弹窗确认按钮，及关联或者反向关联成功
   * 作者:张泽源
   * 创建时间:2024/02/27 14:19:13
   */
  import { ref, getCurrentInstance } from 'vue';
  import { Row, Col, Tree } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { getDocumentColumns } from './tableData';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';

  import { getDirectoryLevel, getPrdFileList, addFolderBindingObject } from '/@/api/demo/document';

  const { t } = useI18n();
  const { proxy }: any = getCurrentInstance();
  const { createMessage } = useMessage();
  const emit = defineEmits(['register', 'success']);
  const isAssociation = ref<boolean>(false);
  const dataSource = ref<any[]>([]);
  const expandedKeys = ref<string[]>([]);
  const selectDirKey = ref<string>('');
  const getDirParam = ref<number>(1);
  const Association = ref<any>({
    folderid: null,
    oid: '',
  });
  const currentRecord = ref<any>({});

  // 提交
  async function handleSubmit() {
    try {
      setModalProps({ confirmLoading: true });
      addFolderBindingObject(Association.value).then((res) => {
        if (res) {
          emit('success', currentRecord.value);
          createMessage.success(t('routes.demo.documentManager.associatedSuccess'));
          handleCancel();
        }
      });
    } finally {
      setModalProps({ confirmLoading: false });
      handleCancel();
    }
  }

  // 取消
  const handleCancel = () => {
    Association.value = {};
    selectDirKey.value = '';
    reload();
    closeModal();
  };

  // 选择目录
  const selectDir = (selectedKeys) => {
    selectDirKey.value = selectedKeys[0];
    reload();
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    isAssociation.value = !!data?.isAssociation;
    Association.value.folderid = Number(data?.selectedDirKey);
    // 获取目录接口
    getDirectoryLevel(getDirParam.value).then((res) => {
      dataSource.value = res;
    });
  });

  // 表格初始化
  const [registerTable, { reload }] = useTable({
    columns: getDocumentColumns(),
    api: getPrdFileList,
    beforeFetch: () => {
      return selectDirKey.value;
    },
    rowSelection: {
      type: 'radio',
      onSelect: (record) => {
        Association.value.oid = record.id;
        currentRecord.value = record;
      },
    },
    customRow: (record: Recordable) => {
      return {
        onClick: () => {
          Association.value.oid = record.id;
          currentRecord.value = record;
        },
      };
    },
    bordered: true,
    useSearchForm: true,
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    pagination: { pageSize: 5, pageSizeOptions: ['5', '10', '15', '20'], defaultPageSize: 5 },
    canResize: false,
    striped: false,
  });
</script>
<style lang="less" scoped></style>
